<template>
  <div ref="container" style="height:150px"></div>
</template>
<script>
import { Column } from '@antv/g2plot';
import { get } from "@/utils/request";
let moment = require("moment");
export default {
  data() {
    return {};
  },
  methods: {
    createdColumn() {
      const columnPlot = new Column(this.$refs.container, {
        data: [
          {
            type: '1月',
            sales: 567,
          },
          {
            type: '2月',
            sales: 521,
          },
          {
            type: '3月',
            sales: 654,
          },
          {
            type: '4月',
            sales: 434,
          },
          {
            type: '5月',
            sales: 820,
          },
          {
            type: '6月',
            sales: 958,
          },
          {
            type: '7月',
            sales: 1234,
          },
          {
            type: '8月',
            sales: 1299,
          },
          {
            type: '9月',
            sales: 967,
          },
          {
            type: '10月',
            sales: 689,
          },
          {
            type: '11月',
            sales: 548,
          },
          {
            type: '12月',
            sales: 479,
          },
        ],
        xField: 'type',
        yField: 'sales',
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle', // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: '#FFFFFF',
            opacity: 0.6,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
        meta: {
          type: {
            alias: '类别',
          },
          sales: {
            alias: '降水量',
          },
        },
      });
      columnPlot.render();
    }
  },
  mounted() {
    this.createdColumn();
  },
};
</script>
<style scoped></style>